<template>
	<hyb-page title="填写订单">
		<template v-slot:body>
			<view class="gui-margin-x-middle gui-margin-top-middle" v-if="info.x_id">
				<view class="gui-bg-white gui-border-radius-large">

					<view v-if="info.g_sc_sfz"
						class="gui-border-b gui-flex  gui-align-items-center gui-space-between gui-padding">
						<view class="gui-text">
							上传身份证
						</view>
						<hyb-upload bigBg="https://xjz.cyygkj.cn/image/idcard.png" ref="id_card"
							v-model="id_card"></hyb-upload>
					</view>


					<view v-if="info.x_xingshi == '到店服务'" @tap="goAddress1()"
						class="gui-flex gui-align-items-center gui-space-between gui-padding">
						<view class="gui-text gui-color-gray">
							<view class="gui-flex">
								<gui-tags text="商家" :size="22"></gui-tags>
								<text>{{info.shangjia.s_name}} {{info.shangjia.s_telphone}}</text>
							</view>

							<view>
								{{info.shangjia.s_address}} {{info.shangjia.s_xxaddress}}
							</view>
						</view>
						<view><text class="gui-icons gui-block gui-color-gray gui-text">&#xe601;</text></view>
					</view>
					<view v-else @tap="goAddress()"
						class="gui-flex gui-align-items-center gui-space-between gui-padding">
						<view class="gui-text gui-color-gray">
							<view class="gui-flex">
								<gui-tags text="请选择服务地址" :size="22"></gui-tags>
								<text>{{address.d_uname}} {{address.d_phone}}</text>
							</view>

							<view>
								{{address.d_address}}{{address.d_xxaddress}}
							</view>
						</view>
						<view><text class="gui-icons gui-block gui-color-gray gui-text">&#xe601;</text></view>
					</view>

					<view v-if="$store.state.base.show_base.yu_yue_sj==1" @tap="popup()" class="gui-border-t">
						<view class=" gui-flex  gui-align-items-center gui-space-between gui-padding">
							<view class="gui-text">
								服务时间
							</view>

							<view class="gui-flex gui-align-items-center"><text
									class="gui-text">{{fa_fwtime ||'选择服务时间'}}</text><text
									class="gui-icons gui-block gui-color-gray gui-text">&#xe601;</text></view>
						</view>
					</view>

					<view class="gui-border-t">
						<view class=" gui-flex gui-align-items-center gui-space-between gui-padding">
							<textarea class="gui-textarea" v-model="yh_bei_zhu" placeholder="备注..." />
						</view>
					</view>
				</view>


				<view class="gui-bg-white gui-border-radius-large gui-margin-top-middle"
					v-if="$store.state.base.show_base.fuwu_gui_ge == 1">
					<view v-for="(num,index) in nums" :key="index" class="gui-flex gui-align-items-center gui-padding-y"
						:class="{'gui-border-t':index>0}">
						<!-- <image :src="info.x_thumb" style="height: 160rpx;width: 160rpx;" mode="aspectFit"></image> -->

						<view class="gui-text gui-flex1 gui-margin-x">
							<view class="gui-flex">
								<text>{{info.x_name}}</text>
							</view>

							<view class="gui-color-gray gui-margin-top-small gui-text-small">
								规格：{{info.x_guigecontent[guiges[index]].name}}
							</view>

							<view class="gui-color-red gui-margin-top-small gui-text-right gui-bold">
								￥{{format_money(info.x_guigecontent[guiges[index]].price)}} x {{num}}
							</view>
						</view>
					</view>
				</view>
				<view v-else
					class="gui-bg-white gui-margin-top gui-flex gui-border-radius-large gui-align-items-center gui-padding">

					<image :src="info.x_thumb" style="height: 160rpx;width: 160rpx;" mode="aspectFit"></image>

					<view class="gui-text gui-flex1 gui-margin-x">
						<view class="gui-flex">
							<text>{{info.x_name}}</text>
						</view>

						<view class="gui-color-gray gui-margin-top-small gui-text-small">
							规格：{{info.x_guigecontent[guige].name}}
						</view>

						<view class="gui-color-red gui-margin-top-small gui-text-right gui-bold">
							￥{{format_money(info.x_guigecontent[guige].price)}} x {{num}}
						</view>
					</view>

				</view>


				<view v-if="base.show_base.xuan_ji_shi == 1" class="gui-bg-white gui-margin-top gui-border-radius-large"
					@tap="goJishi">
					<view class=" gui-flex  gui-align-items-center gui-space-between gui-padding">
						<view class="gui-text">
							服务{{$store.state.base.show_base.shifu_bie_ming}}
						</view>

						<view class="gui-flex gui-align-items-center"><text
								class="gui-text">{{jishi.y_id>0?jishi.name:'选择服务'+$store.state.base.show_base.shifu_bie_ming}}</text><text
								class="gui-icons gui-block gui-color-gray gui-text">&#xe601;</text></view>
					</view>
				</view>


				<view class="gui-bg-white gui-border-radius" v-if="$store.state.base.fb_attributes">
					<view class="gui-form-item gui-border-b gui-padding"
						v-for="(item,index) in $store.state.base.fb_attributes" :key="index">
						<text class="gui-form-label gui-secondary-text">{{item.label}}</text>
						<view class="gui-form-body gui-flex">
							<input type="text" class="gui-form-input gui-flex1" v-model="fb_attributes[item.label]"
								name="y_telphone" :placeholder="'请输入' + item.label" />
						</view>
					</view>
				</view>
			</view>

			<hyb-pay :yhq="info.x_youhuiquanstatus" :max_jifen="info.x_jifen" :gujia="info.x_gujia"
				:dingjin_money="info.x_min_money" :money="money" :discount_money="discount_money"
				@confirm="confirm"></hyb-pay>

			<!--只要显示这个组件会优先使用日历 -->
			<hyb-calendar-popup v-if="$store.state.base.show_base.yu_yue_sj_type==1" v-model="fa_fwtime"
				ref="calendarPopup" title="选择服务时间"></hyb-calendar-popup>

			<gui-popup ref="timePopup" position="bottom">
				<view class="gui-bg-white gui-padding gui-text-center gui-text gui-border-b">
					选择服务时间
				</view>
				<view class="gui-bg-gray">
					<view class="gui-bg-white gui-padding">
						<gui-switch-navigation :titleClass="['gui-primary-text']"
							:activeLineClass="['gui-nav-scale','gui-gtbg-red', 'gui-gtbg-black']" isCenter
							:items="dates" :size="200" activeLineWidth="160rpx" activeDirection="center"
							textAlign="center" :currentIndex="dateIndex" @change="datechange" style="width: 100%">
						</gui-switch-navigation>
					</view>

					<view class="gui-bg-gray gui-flex gui-wrap">
						<view v-for="(item,index) in times" :key="index" style="flex:0 0 33%"
							class="gui-flex gui-justify-content-center">
							<view @tap="timeSelect(index)"
								:class="timeIndex == index?['gui-bg-red','gui-color-white']:['gui-bg-white']"
								class="gui-text-center gui-padding-small gui-border-radius-large gui-margin-x gui-margin-top">
								<view class="gui-text-small" :class="item.times == 0?['gui-color-gray']:[]">
									{{item.start}}-{{item.end}}
								</view>
								<view class="gui-text-small gui-margin-top-small"
									:class="timeIndex == index?['gui-color-white']:item.times==0?['gui-color-gray']:['gui-color-red']">
									剩余{{item.times}}次
								</view>
							</view>
						</view>
					</view>

					<view class="gui-padding gui-margin-top">
						<button type="default" class="gui-button gui-bg-red gui-noborder" @tap.prevent="comfirDate"
							style="border-radius:50rpx;">
							<text class="gui-color-white gui-button-text">确定</text>
						</button>
					</view>
				</view>
				<!-- iphone 底部适配 -->
				<gui-iphone-bottom :customClass="['gui-bg-white', 'gui-dark-bg-level-3']"></gui-iphone-bottom>
			</gui-popup>
		</template>
	</hyb-page>
</template>

<script>
	import moment from 'moment';
	import pay from '../../../../custom/pay';
	export default {
		data() {
			return {
				id_card: "",
				fb_attributes: {},
				info: {},
				address: {},
				guige: -1,
				num: 1,
				tag: "pay",
				jishi: {
					y_id: 0
				},
				dates: [],
				dateIndex: 0,
				timeIndex: -1,
				times: [],
				x_id: 0,
				is_vip: false,
				money: 0,
				discount_money: 0,
				userinfo: {},
				guiges: [],
				nums: [],
				yh_bei_zhu: '',
				idCard1: "https://img-cdn-tc.dcloud.net.cn/uploads/article/20210107/e53bf48607dcf795ab78e419dc5cf432.png",
				fa_fwtime: ''
			}
		},
		async onLoad(options) {

			this.userinfo = await uni.gPost("user/info");
			uni.storage.set("userinfo", this.userinfo);

			if (this.userinfo.huiyuan) {
				this.is_vip = true;
			}

			this.x_id = options.x_id;
			if (options.guige != undefined) {
				this.guige = options.guige;
			}

			if (options.num) {
				this.num = options.num;
			}


			if (options.guiges) {
				this.guiges = options.guiges.split(",");
			}

			if (options.nums) {
				this.nums = options.nums.split(",");
			}


			uni.gPost("fuwu/info", {
				x_id: this.x_id
			}).then((data) => {
				this.info = data;
				// 会员折扣健壮性保护
				const zhekou = (this.userinfo && this.userinfo.huiyuan_xq && this.userinfo.huiyuan_xq
					.h_zhekou) ? this.userinfo.huiyuan_xq.h_zhekou : 1;
				const isVip = this.userinfo && this.userinfo.huiyuan;
				if (this.$store.state.base.show_base.fuwu_gui_ge == 1) {
					let money = 0;
					let discount_money = 0;
					this.nums.forEach((num, index) => {
						const guige = this.info.x_guigecontent[this.guiges[index]];
						if (isVip) {
							if (guige.vip_price > 0) {
								money += guige.vip_price * num;
								discount_money += (guige.price - guige.vip_price) * num;
							} else {
								money += guige.price * num * zhekou;
								discount_money += (guige.price - guige.price * zhekou) * num;
							}
						} else {
							money += guige.price * num;
						}
					})
					this.money = money;
					this.discount_money = discount_money;
				} else {
					if (this.guige == -1) {
						if (isVip) {
							if (this.info.vip_jiage > 0) {
								this.money = this.info.vip_jiage * this.num;
								this.discount_money = (this.info.x_jiage - this.info.vip_jiage) * this.num;
							} else {
								this.money = this.info.x_jiage * this.num * zhekou;
								this.discount_money = (this.info.x_jiage - this.info.x_jiage * zhekou) * this
									.num;
							}
						} else {
							this.money = this.info.x_jiage * this.num;
						}
					} else {
						const guige = this.info.x_guigecontent[this.guige];
						if (isVip) {
							if (guige.vip_price > 0) {
								this.money = guige.vip_price * this.num;
								this.discount_money = (guige.price - guige.vip_price) * this.num;
							} else {
								this.money = guige.price * this.num * zhekou;
								this.discount_money = (guige.price - guige.price * zhekou) * this.num;
							}
						} else {
							this.money = guige.price * this.num;
						}
					}
				}




			})

			uni.gPost("address/list").then((list) => {
				if (list.length > 0) {
					this.address = list[0]
				}
			})

			uni.$on(this.tag, (address) => {
				this.address = address;
			})


			uni.$on("choose_jishi", (jishi) => {
				this.jishi = jishi;
			})
		},

		computed: {
			base: () => {
				return uni.storage.get("base")
			},
		},

		methods: {

			goAddress1() {
				uni.openLocation({
					latitude: parseFloat(this.info.shangjia.latitude),
					longitude: parseFloat(this.info.shangjia.longitude)
				})
			},

			// payChange(type) {
			// 	this.pay_type = type;
			// 	if (type == 0 && this.userinfo.u_money < this.total_money) {
			// 		uni.showToast({
			// 			title: "可用余额不足,请先充值",
			// 			icon: "none"
			// 		})
			// 		this.$nextTick(() => {
			// 			this.pay_type = 1;
			// 		})
			// 	}

			// 	if (type == 1) {
			// 		this.pay_type = -1;
			// 		this.$nextTick(() => {
			// 			this.pay_type = 1;
			// 		})
			// 	}
			// },

			format_money(val) {
				return parseFloat(val).toFixed(2);
			},

			timeSelect(index) {
				if (this.times[index].times > 0) {
					this.timeIndex = index;
					this.fa_fwtime = this.dates[this.dateIndex].id + ' ' + this.times[this.timeIndex]
						.start + '-' + this.times[this.timeIndex].end
				} else {
					uni.showToast({
						title: "已订完!",
						icon: 'none'
					})
				}
			},

			comfirDate() {

				if (this.timeIndex == -1) {
					uni.showToast({
						title: "请选择服务时间",
						icon: 'none'
					})
				} else {
					this.$refs.timePopup.close();
				}
			},

			datechange(e) {
				this.dateIndex = e;
				this.timeIndex = -1;

				uni.gPost("fuwu/times", {
					x_id: this.x_id,
					date: this.dates[this.dateIndex].id
				}).then((times) => {
					this.times = times;
				})
			},

			getDay(day) {
				return ['日', '一', '二', '三', '四', '五', '六'][day];
			},

			popup() {

				if (this.$refs.calendarPopup) {
					this.$refs.calendarPopup.open()
				} else {
					if (this.dates.length == 0) {
						let date = null;
						for (let i = 0; i < 30; i++) {
							date = moment().add(i, 'days');
							this.dates.push({
								id: date.format("YYYY-MM-DD"),
								name: "星期" + this.getDay(date.day()) + "\n" + date.format("YYYY-MM-DD")
							});
						}
						this.datechange(0);
					}
					console.log(this.dates);
					this.$refs.timePopup.open();
				}
			},

			goJishi() {
				uni.navigateTo({
					url: "/hyb_o2o/jishi/list/list?tag=1"
				})
			},

			goAddress() {
				uni.navigateTo({
					url: "/hyb_o2o/address/address?flag=1&tag=" + this.tag
				})
			},

			async confirm(pay_type, jifen, yhq_id, jb_yusuan, pay_u_id) {

				console.log(this.base.show_base.yu_yue_sj)


				let flag = false;
				let label = ""
				if (this.$store.state.base.fb_attributes) {
					this.$store.state.base.fb_attributes.forEach((item) => {
						if (!this.fb_attributes[item.label] && !flag) {
							label = item.label;
							flag = true
						}
					})
				}

				if (!this.fa_fwtime && this.base.show_base.yu_yue_sj) {
					uni.showToast({
						title: "请选择服务时间",
						icon: "none"
					})
				} else if (!this.address.d_id && this.info.x_xingshi != '到店服务') {
					uni.showToast({
						title: "请选择地址",
						icon: "none"
					})
				} else if (flag) {
					uni.showToast({
						title: label + "不能为空",
						icon: "none"
					})
				} else {
					if (this.$refs.id_card) {
						await this.$refs.id_card.uploadAsync()
					}
					if (this.$store.state.base.show_base.fuwu_gui_ge == 1) {
						uni.$pay.pay("pay/fuwu", {
							pay_u_id: pay_u_id,
							id_card: this.id_card,
							xq_uid: this.$store.state.xiaoqu ? this.$store.state.xiaoqu.uid : "",
							fb_attributes: this.fb_attributes,
							jifen: jifen,
							yhq_id: yhq_id,
							x_id: this.x_id,
							d_id: this.address.d_id,
							guiges: this.guiges,
							nums: this.nums,
							y_id: this.jishi.y_id,
							yh_bei_zhu: this.yh_bei_zhu,
							date: this.base.show_base.yu_yue_sj == 1 ? this.fa_fwtime.split(' ')[0] : null,
							time: this.base.show_base.yu_yue_sj == 1 ? this.fa_fwtime.split(' ')[1] : null,
							jb_yusuan: jb_yusuan
						}, pay_type).then(() => {
							if (pay_type == 5) {
								uni.navigateTo({
									url: '/hyb_o2o/h5/h5?src=' + encodeURIComponent(this.base
										.zf_dsfzf_url)
								})
							} else if (pay_type == 6) { //线下支付直接跳转我的订单页面，并创建订单 
								uni.navigateTo({
									url: '/hyb_o2o/inner/pages/fabu/list?tag=yh'
								})
							} else {
								uni.redirectTo({
									url: "/hyb_o2o/inner/pages/fabu/list?tag=yh"
								})
							}

						}).catch((e) => {
							console.log(e)
						})
					} else {
						uni.$pay.pay("pay/fuwu", {
							id_card: this.id_card,
							xq_uid: this.$store.state.xiaoqu ? this.$store.state.xiaoqu.uid : "",
							fb_attributes: this.fb_attributes,
							jifen: jifen,
							yhq_id: yhq_id,
							x_id: this.x_id,
							d_id: this.address.d_id,
							guige: this.guige,
							num: this.num,
							y_id: this.jishi.y_id,
							yh_bei_zhu: this.yh_bei_zhu,
							date: this.base.show_base.yu_yue_sj == 1 ? this.dates[this.dateIndex].id : null,
							time: this.base.show_base.yu_yue_sj == 1 ? (this.times[this.timeIndex].start +
								"-" +
								this
								.times[this.timeIndex].end) : null,
							jb_yusuan: jb_yusuan
						}, pay_type).then(() => {

							if (pay_type == 5) {
								uni.navigateTo({
									url: '/hyb_o2o/h5/h5?src=' + encodeURIComponent(this.base
										.zf_dsfzf_url)
								})
							} else {
								uni.redirectTo({
									url: "/hyb_o2o/inner/pages/fabu/list?tag=yh"
								})
							}

						}).catch((e) => {
							console.log(e)
						})
					}


				}
			}
		}
	}
</script>

<style>

</style>